<section>
  <h4>Click</h4>
  <div class="btn-group g-dropdown" dDropDown appendToBody [trigger]="'click'">
    <a dDropDownToggle class="devui-dropdown-default devui-dropdown-origin">
      More
      <span class="icon icon-chevron-down"></span>
    </a>

    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem" dDropDown appendToBody [trigger]="'click'" [appendToBodyDirections]="subMenuDirections">
        <a class="devui-dropdown-item" dDropDownToggle>Item 1 <span class="icon icon-chevron-right"></span></a>
        <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
          <li role="menuitem" dDropDown appendToBody [trigger]="'click'" [appendToBodyDirections]="subMenuDirections">
            <a class="devui-dropdown-item" dDropDownToggle>Item 1-1 <span class="icon icon-chevron-right"></span></a>
            <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-1 </a>
              </li>
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-2 </a>
              </li>
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-3</a>
              </li>
            </ul>
          </li>
          <li role="menuitem" dDropDown appendToBody [trigger]="'click'" [appendToBodyDirections]="subMenuDirections">
            <a class="devui-dropdown-item" dDropDownToggle>Item 1-2 <span class="icon icon-chevron-right"></span></a>
            <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-2-1</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li role="menuitem">
        <a class="devui-dropdown-item">Item 2</a>
      </li>
    </ul>
  </div>
</section>
<section>
  <h4>Hover</h4>
  <div class="btn-group g-dropdown" dDropDown appendToBody [trigger]="'hover'">
    <a dDropDownToggle class="devui-dropdown-default devui-dropdown-origin">
      More
      <span class="icon icon-chevron-down"></span>
    </a>

    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem" dDropDown appendToBody [trigger]="'hover'" [appendToBodyDirections]="subMenuDirections">
        <a class="devui-dropdown-item" dDropDownToggle>Item 1 <span class="icon icon-chevron-right"></span></a>
        <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
          <li role="menuitem" dDropDown appendToBody [trigger]="'hover'" [appendToBodyDirections]="subMenuDirections">
            <a class="devui-dropdown-item" dDropDownToggle>Item 1-1 <span class="icon icon-chevron-right"></span></a>
            <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-1 </a>
              </li>
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-2 </a>
              </li>
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-3</a>
              </li>
            </ul>
          </li>
          <li role="menuitem" dDropDown appendToBody [trigger]="'hover'" [appendToBodyDirections]="subMenuDirections">
            <a class="devui-dropdown-item" dDropDownToggle>Item 1-2 <span class="icon icon-chevron-right"></span></a>
            <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-2-1</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li role="menuitem">
        <a class="devui-dropdown-item">Item 2</a>
      </li>
    </ul>
  </div>
</section>
<section>
  <h4>Click to Open, Mouse Leave Menu Auto Close</h4>
  <div class="btn-group g-dropdown" dDropDown appendToBody [trigger]="'click'" [closeOnMouseLeaveMenu]="true">
    <a dDropDownToggle class="devui-dropdown-default devui-dropdown-origin">
      More
      <span class="icon icon-chevron-down"></span>
    </a>

    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem" dDropDown appendToBody [trigger]="'hover'" [appendToBodyDirections]="subMenuDirections">
        <a class="devui-dropdown-item" dDropDownToggle>Item 1<span class="icon icon-chevron-right"></span></a>
        <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
          <li role="menuitem" dDropDown appendToBody [trigger]="'hover'" [appendToBodyDirections]="subMenuDirections">
            <a class="devui-dropdown-item" dDropDownToggle>Item 1-1 <span class="icon icon-chevron-right"></span></a>
            <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-1</a>
              </li>
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-2</a>
              </li>
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-1-3</a>
              </li>
            </ul>
          </li>
          <li role="menuitem" dDropDown appendToBody [trigger]="'hover'" [appendToBodyDirections]="subMenuDirections">
            <a class="devui-dropdown-item" dDropDownToggle>Item 1-2 <span class="icon icon-chevron-right"></span></a>
            <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
              <li role="menuitem">
                <a class="devui-dropdown-item">Item 1-2-1</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li role="menuitem">
        <a class="devui-dropdown-item">Item 2</a>
      </li>
    </ul>
  </div>
</section>
